<template>
  <div class="sales-volume" ref="barRef"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import type { ECharts } from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { getDatas } from '@/mocks/data';
import { useResize } from '@/hooks';

const barRef = ref();
const goods = ref([]);

const categories = ref([]);
const data = ref([]);

const idx = ref(0);
const len = ref(6);
var myChart: ECharts, timer: any;

function chartInit() {
  myChart = echarts.init(barRef.value);

  let option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '10px',
      bottom: '10px',
      right: '10px',
      containLabel: true
    },
    xAxis: [
      {
        data: categories.value
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '销售量',
        type: 'bar',
        barWidth: '55%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4481eb' },
            { offset: 1, color: '#04befe' }
          ])
        },
        data: data.value,
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  };
  myChart.setOption(option);
  if (goods.value.length <= len.value) return;
  createTimer();
}

function getRangeData(index) {
  if (goods.value.length <= len.value) {
    return goods.value;
  }
  let result = [];
  for (let i = 0; i < len.value; i++) {
    if (index + i < goods.value.length) {
      result.push(goods.value[index + i]);
    } else {
      result.push(goods.value[(index + i) % goods.value.length]);
    }
  }
  return result;
}

function setChartsData() {
  const result = getRangeData(idx.value);
  categories.value = result.map((v) => v.name);
  data.value = result.map((v) => v.counts);
}

function updateChart() {
  setChartsData();
  myChart?.setOption({
    xAxis: [
      {
        data: categories.value
      }
    ],
    series: [
      {
        data: data.value
      }
    ]
  });
}

function createTimer() {
  clearTimer();
  timer = setInterval(() => {
    idx.value++;
    if (idx.value > goods.value.length) {
      idx.value = 0;
    }
    updateChart();
  }, 5000);
}

function clearTimer() {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
}

function _getData() {
  getDatas({ pageSize: 100, pages: 1 }).then((res) => {
    goods.value = res.data;
    setChartsData();
    chartInit();
  });
}

useResize(
  barRef,
  () => {
    len.value = Math.floor(barRef.value?.offsetWidth / 100);
    updateChart();
    myChart?.resize();
  },
  {
    debounce: 200
  }
);

onMounted(() => {
  _getData();
  len.value = Math.floor(barRef.value.offsetWidth / 100);
});
onBeforeUnmount(() => {
  clearTimer();
});
</script>

<style scoped lang="scss">
.sales-volume {
  width: 100%;
  height: 500px;
}
</style>
